<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06_定位-相对定位-特点2-参照的是自己原来的位置移动-</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }


            #d1 {
                position: relative;
                /* 相对元素移动之后还占据位置 不会对后面元素进行影响 */
                /* left: 200px; */

                /* 如果元素重叠  会覆盖 也就移动的那个元素的层级高 */
                top:100px;

                width: 100px;
                height: 100px;
                background-color: aqua;
            }

            #d2 {
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div id="d1"></div>

        <div id="d2"></div>
    </body>
</html>